<template>
    <div class="shopcar-container">

        <!-- 商品列表区域 -->

        <!-- api -->
        <!-- 问题：如何从购物车中获取商品添加了数量呢？ -->
        <!-- 1.我们先创建一个 空对象 然后 循环购物车中的所有商品的数据 把当前循环
        这条商品的 Id 作为对象的属性名 count只作为 对象的属性值 这样 当把所有的商品循环
        一遍 就会 得到一个对象：{88:1,89:2,90:3}  id 88 数量 -->
        <!-- <div class="goods-list" v-for="(item, i) in goodslist" :key="item.id">
            <div class="mui-card">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                       <mt-switch v-model="$store.getters.getGoodsSelected[item.id]"
                       @change="selectedChanged(item.id,$store.getters.getGoodsSelected[item.id])"></mt-switch>
                       <img :src="item.thumb_path" >
                       <dir class="info">
                           <h1>{{ item.title }}</h1>
                           <p>
                               <span class="price">￥{{ item.sell_price }}</span>
                               <numbox :initcount="$store.getters.getGoodsCount[item.id]" :goodsid="item.id"></numbox>
                               <a href="#" @click.prevent="remove(item.id,i)">删除</a>
                           </p>
                       </dir>

                    </div>
                </div> 
          </div>
        </div>      -->




        <div class="goods-list">
            <div class="mui-card">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                       <mt-switch ></mt-switch>
                       <img src="http://img2.imgtn.bdimg.com/it/u=1673810720,2250003342&fm=26&gp=0.jpg" >
                       <dir class="info">
                           <h1>小花猫~~~~~喵喵喵</h1>
                           <p>
                               <span class="price">￥999</span>
                               <numbox ></numbox>
                               <a href="#">删除</a>
                           </p>
                       </dir>

                    </div>
                </div> 
          </div>
        </div>

        <!-- 结算区 -->
        <!-- api -->
    <!-- <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner jiesuan">
                    <div class="left">
                        <p>总记(不含运费)</p>
                        <p>已勾选商品 <span class="red">{{ $store.getters.getGoodsCountAndmount.count }}</span> 件,总价
                         <span class="red">{{ $store.getters.getGoodsCountAndmount.amount }}</span></p>
                    </div>
                    <mt-button type="danger">去结算</mt-button>
                </div>        
            </div>
        </div> -->



        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner jiesuan">
                    <div class="left">
                        <p>总记(不含运费)</p>
                        <p>已勾选商品 <span class="red">0</span> 件,总价 <span class="red">￥999</span></p>
                    </div>
                    <mt-button type="danger">去结算</mt-button>
                </div>        
            </div>
        </div>



    </div>
</template>


<script>

//导入 shopcar_numbox 组件
import numbox from '../subcomponents/shopcar_numbox.vue'

export default {
    data(){
        return {
            goodslist:[]//api 请求 购物车所有商品的数据
        }
    },
    created(){
        this.getGoodsList()
    },
    methods:{
        //通过 获取 store 中的car中的 加入购物车 的 每个商品Id 放在 api 根据car 中的Id 获取数据
        getGoodsList(){
            //1.获取 store 中所有商品Id 然后拼接出一个 用逗号分割的字符串
            // var arrId = []
            // this.$store.state.car.forEach(item => {
            //     arrId.push(item.id)
            // })

            // //如果请求的购物车是空的 会报错 就需要判断 
            // if(arrId.length <= 0){
            //     return ;
            // }

            // //获取购物车 商品列表  api 是使用 字符串拼接的形式的
            // //http://localhost:8080/#/shopcar/1,2,3 的形式 所以要用字符串拼接 , 
            // this.$http.get('api/goods/getshopcarlist/' + arrId.join(",")).then(result => {
            //     if(result.body.status === 0){
            //         this.goodslist = result.body.message;
            //     }
            // })
        },
        remove(id,index){
            //点击删除 把商品 从 store中根据 传递的Id删除 同时把当前组件中的 goodslist中 对应要删除的那个商品
            //使用index 来删除

            //删除本地的数据
            this.goodslist.splice(index,i)

            //把 要删除的Id值 传给 removeFormCar 中
            this.$stors.commit('removeFormCar',id)
        },
        selectedChanged(id,val){
            //每当点击开关 把最新你的开关 同步到 store 中
            this.$store.commit('updateGoodsSelected',{id,selected:val})
        }
    },
        
    components:{
        numbox
    }
}
</script>

<style lang="scss" scoped>
    .shopcar-container{
        background-color: #eee;
        overflow: hidden;
     .goods-list {
         .mui-card-content-inner{
             display:flex;
             align-items: center;
         }
         img {
             width: 60px;
             height: 60px;
         }
         h1 {
             font-size: 13px;
         }
         .info {
             display: flex;
             flex-direction: column;
             justify-content: space-between;
             padding: 0;
             .price{
                 color: red;
                 font-weight: bold;
             }
         }
     }
     .jiesuan{
         display: flex;
         justify-content: space-between;
         align-items: center;
         .red {
             color: red;
             font-weight: bold;
         }
     }
    }
</style>